<template>
  <navbar :title="'网易严选'"></navbar>

  <div class="goodDetails" style="height: 100%; margin-bottom: 1.5rem">
    <headers />
    <div class="swiper" style="margin-top: 0.45rem">
      <van-swipe>
        <van-swipe-item>
          <img
            src="https://yanxuan-item.nosdn.127.net/9973f18062cd3c78800f7796d562c559.png?type=webp&imageView&quality=75&thumbnail=750x0">
        </van-swipe-item>
        <van-swipe-item>
          <img
            src="https://yanxuan-item.nosdn.127.net/da169a66451b16e285956b6ded8935ce.png?type=webp&imageView&quality=75&thumbnail=750x0">
        </van-swipe-item>
        <van-swipe-item>
          <img
            src="https://yanxuan-item.nosdn.127.net/9973f18062cd3c78800f7796d562c559.png?type=webp&imageView&quality=75&thumbnail=750x0">
        </van-swipe-item>
        <van-swipe-item>
          <img
            src="https://yanxuan-item.nosdn.127.net/ad7be6981d911d0dfc5e7347f88b32f4.png?type=webp&imageView&quality=75&thumbnail=750x0">
        </van-swipe-item>
        <template #indicator="{ active, total }">
          <div class="custom-indicator">{{ active + 1 }}/{{ total }}</div>
        </template>
      </van-swipe>
    </div>
    <div class="bannerContent">
      <div class="col1" style="float: left; position: relative">
        <div class="contents">新人</div>
        <div class="price">￥199.9</div>
      </div>
      <div class="countdown" style="float: right; margin-right: .3rem">
        <img src="https://yanxuan.nosdn.127.net/static-union/1678945972c531b5.png" alt="" style="width: 1.46667rem;height: 1.6rem;position: absolute;right: 0;">
      </div>
    </div>
    <div class="content">
      <div class="baseInfo">
        <div class="info">
          <p class="name">健康多喝水 大容量保温杯赠DIY贴纸0.9/1.4L</p>
          <p class="desc">推荐理由</p>
        </div>

        <div class="comment" style="position: relative">
          <div class="num">99.9%</div>
          <div class="com">好评率</div>
          <span class="iconfont icon-next"
            style="font-weight: 700;position: absolute; top: .2rem; right: .1rem; font-size: .4rem"></span>
        </div>
      </div>
      <div class="rcmdBanner">
        <ul>
          <li><i>1</i><span>安全健康316L不锈钢保温杯</span></li>
          <li><i>2</i><span>可爱DIY贴纸</span></li>
          <li><i>3</i><span>矮矮胖胖，温馨陪伴</span></li>
          <li><i>4</i><span>900ml/1400ml 随行小水库</span></li>
        </ul>
      </div>
    </div>
    <div style="border-top: 0.26667rem solid rgb(244, 244, 244);border-bottom: 0.26667rem solid rgb(244, 244, 244);">
      <div class="m-points">邮费: 免邮，合作仓直发 <span class="iconfont icon-next"
          style="font-size: .4rem;font-weight: 700;float: right; margin-right: .3rem"></span></div>
      <div class="m-points">购物返: 最高<i style="color: rgb(221, 26, 33);">9积分</i> <span class="iconfont icon-next"
          style="font-size: .4rem;font-weight: 700;float: right; margin-right: .3rem"></span></div>
    </div>

    <!-- 商品参数 -->
    <div class="commodParams">
      商品参数
    </div>
    <div class="m-btnGroup">
      <button class="btn_k"><i><van-icon name="service-o" size="25" /></i></button>
      <button class="btn_m">立即购买</button>
      <button class="btn_c" @click="showPopup">加入购物车</button>
    </div>

    <!-- 弹出 -->
    <van-popup
      v-model:show="show"
      position="bottom"
      :style="{ height: '50%' }"
    />
  </div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
const show = ref(false);
const showPopup = () => {
  show.value = true;
};
</script>

<style  scoped>
.custom-indicator {
  position: absolute;
  right: .2rem;
  bottom: .3rem;
  padding: 0 .2rem;
  font-size: .3rem;
  color: #bbb;
  background: #fff;
  border: 1px solid #eee;
}

.swiper img {
  width: 100%;
  vertical-align: bottom;
}

.con .selected {
  border-color: red !important;
  color: red !important;
}

.bannerContent {
  overflow: hidden;
  background-color: #FA1E32;
  height: 1.6rem;
}

.bannerContent .contents {
  color: #fff;
  font-size: .32rem;
  line-height: .48rem;
  height: .48rem;
  text-align: left;
  margin-top: .15rem;
  margin-left: 15px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 700;
}

.price {
  color: #fff;
  padding-right: .4rem;
  font-size: .64rem;
  line-height: .96rem;
  text-align: left;
  font-weight: bold;
  padding-left: 15px;
}

.price span {
  opacity: .8;
  color: #fff;
  text-decoration: line-through;
  margin-left: .10667rem;
  font-weight: 700;
  font-size: .32rem;
  line-height: .48rem;
  height: .48rem;
}

.countdown {
  color: #fff;
  overflow: hidden;
  white-space: nowrap;
  font-size: .32rem;
  line-height: .53333rem;
  text-align: right;
  line-height: 1.6rem;
}

.content {
  position: relative;
  padding: .34667rem 0 .48rem .4rem;
}

.content .baseInfo {
  display: flex;
  margin-top: .18667rem;
  padding-right: .32rem;
}

.baseInfo .info {
  flex: 1;
}

.baseInfo .name {
  text-align: left;
  font-size: .42667rem;
  color: #333;
  line-height: .64rem;
  margin-bottom: .05333rem;
  font-weight: 700;
}

.baseInfo .desc {
  text-align: left;
  font-size: .32rem;
  line-height: .48rem;
  color: #333;
  font-weight: lighter;
}

.comment {
  justify-content: center;
  width: 2.37333rem;
  padding-left: .26667rem;
  text-align: center;
  font-size: .37333rem;
}

.comment .num {
  font-weight: 700;
  font-size: .42667rem;
  line-height: .6rem;
  color: #DD1A21;
  text-align: center;
}

.comment .com {
  font-family: PingFangSC-Light;
  line-height: .48rem;
  font-size: .32rem;
  color: #7F7F7F;
}

.rcmdBanner {
  text-align: left;
  margin: .16rem .3rem 0 0;
  padding: .18667rem .26667rem;

  line-height: .8rem;
  background: #FAFAFA;
  border: 1px solid #E6E6E6;
  border-radius: .05333rem;
  position: relative;
}

.rcmdBanner i {
  display: inline-block;
  width: .32rem;
  height: .32rem;
  border: 1px solid #DD1A21;
  border-radius: 50%;
  text-align: center;
  line-height: .32rem;
  font-size: .26667rem;
  color: #DD1A21;
  font-family: PingFang SC;
  font-weight: 700;
  margin-right: .10667rem;
  vertical-align: middle;
}

.rcmdBanner span {
  display: inline-block;
  height: .48rem;
  line-height: .48rem;
  vertical-align: middle;
  font-size: .32rem;
  color: #333;
}

.m-points {
  text-align: left;
  border-bottom: 1px solid #d9d9d9;
  margin-left: .4rem;
  font-size: .37333rem;
  color: #333;
  line-height: 1.38667rem;

}


/* 加入购物车 */
.commodParams {
  width: 100%;
  height: 280px;
  padding: 15px;
  box-sizing: border-box;
  background-color: #fff;
}
.m-btnGroup {
  display: flex;
  width: 100%;
  position: fixed;
  height: 1.388667rem;
  bottom: 0px;
}

.m-btnGroup button {

  vertical-align: middle;
  text-align: center;
  font-size: .37333rem;
  border: 1px solid #DD1A21;
  outline: 0;
  background-color: #fff;
}

.m-btnGroup .btn_k {
  width: 2.08rem;
  height: 1.38667rem;

  border: none;
  border-top: 1px solid #ccc;
}

.m-btnGroup .btn_m {
  flex: 1;
  font-size: .37333rem;
  border: 1px solid #ccc;
  border-right: #ccc;
  color: #333;
}

.m-btnGroup .btn_c {
  flex: 1;
  background-color: #DD1A21;
  border: 1px solid #DD1A21;
  color: #fff;
}

.btn_k i {
  width: .8rem;
  height: .8rem;
  display: inline-block;
  vertical-align: middle;
  /* background-image: url('//yanxuan-static.nosdn.127.net/hxm/yanxuan-wap/p/20161201/style/img/icon-normal/detail-kefu-d10f0489d2.png?imageView&type=webp'); */
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
</style>